<nz-drawer [nzClosable]="false" [nzVisible]="visible" nzPlacement="right" nzWidth="40%" nzTitle="设备"
           [nzFooter]="footerTpl"
           (nzOnClose)="close()">
  <form nz-form nzLayout="vertical" nz-row [formGroup]="validateForm" (ngSubmit)="submitForm()">

    <div nz-col nzSpan="12">
      <img src="{{'api/file/view-picture/' + devicePhotoId }}" style="width: 98%;height: 260px" />
      <nz-upload nzAction="api/file/upload" [nzShowUploadList]="false"
                 (nzChange)="handleChange($event)">
        <button nz-button nzSize="small" class="button_view" type="button">
          <i nz-icon nzType="upload"></i>上传图片
        </button>
      </nz-upload>
    </div>

    <div nz-row nz-col nzSpan="12">
      <nz-form-item nz-col nzSpan="24">
        <nz-form-label nzFor="code"> 编号</nz-form-label>
        <nz-form-control nzErrorTip="Please input your roleCode!">
          <input nzSize="small" nz-input id="code" formControlName="code" [readonly]="isUpdate" />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item nz-col nzSpan="24">
        <nz-form-label nzFor="name"> 名称</nz-form-label>
        <nz-form-control nzErrorTip="Please input your roleName!">
          <input nzSize="small" nz-input id="name" formControlName="name" />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item nz-col nzSpan="24">
        <nz-form-label nzFor="deviceGroupId"> 设备类型</nz-form-label>
        <nz-form-control nzErrorTip="Please input your roleName!">
          <nz-select nzSize="small" formControlName="deviceGroupId" id="deviceGroupId">
            <nz-option *ngFor="let item of deviceGroups" [nzLabel]="item.name" [nzValue]="item.id"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>



    <nz-form-item nz-col nzSpan="12">
      <nz-form-label nzFor="type"> 分类</nz-form-label>
      <nz-form-control nzErrorTip="Please input your roleName!">
        <input nzSize="small" nz-input id="type" formControlName="type" />
      </nz-form-control>
    </nz-form-item>

    <nz-form-item nz-col nzSpan="12">
      <nz-form-label nzFor="brand"> 品牌</nz-form-label>
      <nz-form-control nzErrorTip="Please input your roleName!">
        <input nzSize="small" nz-input id="brand" formControlName="brand" />
      </nz-form-control>
    </nz-form-item>

    <nz-form-item nz-col nzSpan="12">
      <nz-form-label nzFor="serialNum"> 出厂编号</nz-form-label>
      <nz-form-control nzErrorTip="Please input your roleName!">
        <input nzSize="small" nz-input id="serialNum" formControlName="serialNum" />
      </nz-form-control>
    </nz-form-item>

    <nz-form-item nz-col nzSpan="12">
      <nz-form-label nzFor="supplier"> 供应商</nz-form-label>
      <nz-form-control nzErrorTip="Please input your roleName!">
        <input nzSize="small" nz-input id="supplier" formControlName="supplier" />
      </nz-form-control>
    </nz-form-item>

    <nz-form-item nz-col nzSpan="12">
      <nz-form-label nzFor="buyDate"> 购买日期</nz-form-label>
      <nz-form-control nzErrorTip="Please input your roleName!">
        <nz-date-picker nzSize="small" id="buyDate" formControlName="buyDate" [nzFormat]="dateFormat" [nzMode]="'date'"
                        (ngModelChange)="onChange($event)"></nz-date-picker>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item nz-col nzSpan="12">
      <nz-form-label nzFor="buyMoney"> 购买金额</nz-form-label>
      <nz-form-control nzErrorTip="Please input your roleName!">
        <input nzSize="small" nz-input id="buyMoney" formControlName="buyMoney" />
      </nz-form-control>
    </nz-form-item>

    <nz-form-item nz-col nzSpan="12">
      <nz-form-label nzFor="responsible"> 负责人</nz-form-label>
      <nz-form-control nzErrorTip="Please input your roleName!">

        <nz-select nzShowSearch nzAllowClear nzSize="small" nzPlaceHolder="Select a status"
                   formControlName="responsibleId" id="responsible">
          <nz-option *ngFor="let item of users" [nzLabel]="item.username" [nzValue]="item.id"></nz-option>
        </nz-select>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item nz-col nzSpan="12">
      <nz-form-label nzFor="status"> 状态</nz-form-label>
      <nz-form-control>
        <nz-select nzSize="small" nzShowSearch nzAllowClear nzPlaceHolder="Select a status" formControlName="status"
                   id="status">
          <nz-option nzLabel="启用" [nzValue]=1></nz-option>
          <nz-option nzLabel="禁用" [nzValue]=0></nz-option>
        </nz-select>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item nz-col nzSpan="24">
      <nz-form-label nzFor="memo"> 备注</nz-form-label>
      <nz-form-control
        [nzValidateStatus]="validateForm.controls['memo']"
        nzErrorTip="Please input your phone memo!"
      >
        <textarea formControlName="memo" id="memo" nz-input rows="2" placeholder="write any thing"></textarea>
      </nz-form-control>
    </nz-form-item>

  </form>

  <ng-template #footerTpl>
    <div style="float: right">
      <button nz-button style="margin-right: 8px;" (click)="close()">取消</button>
      <button nz-button nzType="primary" (click)="submitForm()">保存</button>
    </div>
  </ng-template>

</nz-drawer>
